<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是平民</title>
    <script type="text/javascript" src="layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="layuiadmin/style/admin.css">
    <style>
        .sel_btn{
            height: 35px;
            line-height: 35px;
            padding: 0 11px;
            background-color: #1E9FFF;
            border-radius: 3px;
            display: inline-block;
            text-decoration: none;
            font-size: 14px;
            outline: none;
        }
        .ch_cls{
            background: #e4e4e4;
        }
        .layui-table-cell{
            height:60px;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div style="width: 1250px;text-align: center">
        <div>
            <div style="font-size: 20px;text-align: center">
                <span id="currentStatus" style="color: red;"></span>我当前的牌是：<img id="mySelfCardImg" style="width: 60px;height: 80px;" src="" alt=""><img id="mySelfCardImg1" style="width: 60px;height: 80px;display: none" src="" alt=""><!--【<span id="myCard" style="color: red"></span>】-->
                公共的牌是：<img id="publicImg" style="width: 60px;height: 80px;" src="" alt=""><!--【<span id="publicCard" style="color: red"></span>】-->
            </div>
            <div style="margin-top: 20px; text-align: center">
                <!--<button class="layui-btn layui-btn-normal" id="getSelfCard">取牌</button>-->
                <button class="layui-btn layui-btn-normal" id="flopMyCard">翻开我的牌</button>
                <button class="layui-btn layui-btn-warm" id="playMethod" >玩法介绍</button>
            </div>
            <div style="margin-top: 20px; text-align: center">
                <a class="sel_btn" id="restart">重新开始</a>
            </div>
            <div style="font-size: 20px;margin-top: 20px; text-align: center">
                剩余的牌有：<span id="shenyu"></span>
            </div>
        </div>
        <div style="margin-top: 20px; height: 300px;margin-left: 332px;float: left;display: block;">
            <table id="flopRecord" lay-filter="flopRecord"></table>
        </div>
        <div style="margin-top: 20px; height: 300px;float: right;display: block;margin-right: 250px;">
            <table id="licensingRecord" lay-filter="licensingRecord"></table>
        </div>
    </div>
</body>
<script>
    var username = '';
    var role = '';
    var selfCard = '';
    var model = '';
    layui.use('table', function(){
        var table = layui.table;
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        // 1 庄 2 民
        role = getUrlParameter('role');
        username = getUrlParameter('name');
        model = getUrlParameter('model');
        //selfCard = getUrlParameter('selfCard');
        if(role == '1'){
            $('#currentStatus').text('【庄】');
        }else{
            $('#currentStatus').text('【民】');
        }

        //getSelfCard();
        $('#mySelfCardImg').attr('src','img/morengong.png');

        //刚进入页面时候，庄家没发公牌之前的默认图片
        $('#publicImg').attr('src','img/morengong.png');

        $('#shenyu').text(getTotal());

        if(model == '0'){
            $('#showPublicCard').show();
        }else if(model == '1'){
            $('#showPublicCard').hide();
            $('#mySelfCardImg1').attr('src','img/morengong.png');
            $('#mySelfCardImg1').show();
        }

        setInterval(function () {
            getPub();
        },3000);

        //第一个实例
        table.render({
            elem: '#flopRecord'
            ,width:310
            ,height:800
            ,url: 'getFlopLog' //数据接口
            //,page: true //开启分页
            //,data: flopLog
            ,cols: [[ //表头
                ,{field: 'name', title: '名称', width:120}
                ,{field: 'log', title: '翻牌记录', width:180,templet : function(d) {
                        return '<span>翻开了牌：</span><img style="width: 40px;height: 60px;" src="'+ d.log +'">';
                    }}
            ]],
            done: function (res, curr, count) {
                console.log(res.data.flopLog);
            }
        });


        table.render({
            elem: '#licensingRecord'
            ,url: 'getLicensingLog' //数据接口
            ,width:300
            ,height: 800
            //,page: true //开启分页
            ,cols: [[ //表头
                {field: 'log', title: '摸牌记录', width:290,templet : function(d) {
                        if(d.log.indexOf('.png') > 0){
                            return '<span style="color: red;">庄家发了底牌：</span><img style="width: 40px;height: 60px;" src="'+ d.log +'">';
                        }else{
                            return '<span>'+d.log+'</span>';
                        }
                    }}
            ]],
            done: function (res, curr, count) {}
        });

        /*$('#getSelfCard').on('click',function () {
            $.ajax({
                url:'getSelfCard?name=' + username,
                type:'get',
                success:function(res){
                    if(res.code == 200){
                        $('#myCard').text(res.data.selfCard);
                        $('#shenyu').text(getTotal);
                    }else if(res.code == 500){
                        layer.msg(res.data.message);
                    }
                },
                error: function(msg){

                }
            });
        });*/
        function getSelfCard() {
            $.ajax({
                url:'getSelfCard?name=' + username,
                type:'get',
                success:function(res){
                    if(res.code == 200){
                        //$('#myCard').text(res.data.selfCard);
                        $('#mySelfCardImg').attr('src',res.data.selfCard);
                        $('#shenyu').text(getTotal());
                    }else if(res.code == 500){
                        layer.msg(res.data.message);
                    }
                },
                error: function(msg){

                }
            });
        }

        $('#flopMyCard').on('click',function () {
            var myCardUrl = $('#mySelfCardImg').attr('src');
            var myCardUrl1 = $('#mySelfCardImg1').attr('src');
            if(model == 1 && myCardUrl == 'img/morengong.png' && myCardUrl1 == 'img/morengong.png'){
                layer.msg("你还没牌啊，翻啥？？");
                return;
            }
            if(model == 0 && myCardUrl == 'img/morengong.png'){
                layer.msg("你还没牌啊，翻啥？？");
                return;
            }
            var flopMyCardUrl = '';
            if(model == '0'){
                flopMyCardUrl = 'flopMyCard?name=' + username + '&card=' + myCardUrl;
            }else if(model == '1'){
                flopMyCardUrl = 'flopMyCard?name=' + username + '&card=' + myCardUrl + '&card1=' + myCardUrl1;
            }
            layui.layer.confirm('确定要翻开吗？', {
                btn: ['翻开','算了'] //按钮
            }, function(){
                $.ajax({
                    url:flopMyCardUrl,
                    type:'get',
                    //dataType:'json',
                    //data:{'username':username,'role':role,'curCard':$('#myCard').text()},
                    success:function(res){
                        if(res.code == 200){
                            layer.msg("翻牌成功！");
                            table.reload('flopRecord', {where: {}});
                            getReSetCard(username,model);
                            getPrivCard(username);
                            //getSelfCard();
                        }
                    },
                    error: function(msg){

                    }
                });
            }, function(){

            });
        });

        function getPub() {
            if(model == 1){
                $('#shenyu').text(getTotal());
            }else if(model == 0){
                $.ajax({
                    url:'pubCard',
                    type:'get',
                    async:false,
                    success:function(res){
                        if(res.code == 200){
                            //$('#publicCard').text(res.data);
                            if(res.data){
                                $('#publicImg').attr('src',res.data);
                            }
                            $('#shenyu').text(getTotal());
                        }
                    },
                    error: function(msg){}
                });
            }
            // 拿属于自己的牌
            getPrivCard(username);
            table.reload('flopRecord', {where: {}});
            table.reload('licensingRecord', {where: {}});
        }

        /*$('#getPub').on('click',function () {
            $.ajax({
                url:'pubCard',
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        $('#publicCard').text(res.data);
                        $('#shenyu').text(getTotal());
                    }
                },
                error: function(msg){

                }
            });

            /!*$.ajax({
                url:'getPubCard',
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        $('#publicCard').text(res.data.publicCard);
                        $('#shenyu').text(getTotal());
                    }
                },
                error: function(msg){

                }
            });*!/
            table.reload('flopRecord', {where: {}});
            table.reload('licensingRecord', {where: {}});
        });*/

        $('#restart').on('click',function () {
            var curTotal = getTotal();
            if(parseInt(curTotal) > 0 && parseInt(curTotal) < 55){
                layer.alert("这轮游戏还没完，跑？？等庄家解散才能开始！！！");
                return;
            }
            var indexUrl = 'index.html?name=' + username;
            $('#restart').attr('href',indexUrl);
            userLogOut();
            /*layer.confirm('确定要重新开始吗？', {
                btn: ['重新开始','继续'] //按钮
            }, function(){
                var curTotal = getTotal();
                if(parseInt(curTotal) > 0 && parseInt(curTotal) < 55){
                    layer.alert("妈的，这轮游戏还没完，跑？？等庄家解散才能开始，傻叉");
                    return;
                }
                var indexUrl = 'index.html?name=' + username;
                $('#restart').attr('href',indexUrl);
                userLogOut();
            }, function(){

            });*/
        });

        $('#playMethod').on('click',function () {
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '240px'], //宽高
                title:'玩法介绍',
                content: '<p>1、民勤特别玩法</p>'+
                    '<p>2、其实吧，规矩是死的，人是活的，不要太死板，渴了就【喝点】！！</p>'+
                    '<p>3、其实只有庄家才可以【洗牌】哦！！</p>'+
                    '<p>4、等庄家【发公牌】，你的页面上将会显示出来公共的牌，注意，你自己的的牌需要和公牌比哦！！</p>'+
                    '<p>5、【翻开我的牌】是将你自己的牌翻开，这样所有人都可以看到了！！</p>'+
                    '<p>6、【重新开始】是结束本轮游戏，注意首先需要庄家允许，才可以开下一轮！！</p>'+
                    '<p>7、【翻牌记录】将会记录所有人的所有翻牌操作，不会给你作弊的机会的！！</p>'+
                    '<p>8、【摸牌记录】将会记录所有人的抓牌操作，你抓取的任何一张牌，大家都知道，抓错了？？赶紧喝吧</p>'
            });
        });
    });
    //获取剩余的牌数
    function getTotal() {
        var total = 0;
        $.ajax({
            url:'getTotal',
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){
                    total = res.data.total;
                }
            },
            error: function(msg){

            }
        });
        return total;
    }

    function userLogOut() {
        $.ajax({
            url:'userLogOut?name=' + username,
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){}
            },
            error: function(msg){}
        });
    }

    function getPrivCard(name) {
        $.ajax({
            url:'getPrivCard?name=' + name + '&model=' + model,
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){
                    if(model == 1 && res.data == 'null:null'){
                        $('#mySelfCardImg').attr('src','img/morengong.png');
                        $('#mySelfCardImg1').attr('src','img/morengong.png');
                    }else if(model == 1 && res.data.indexOf(':') > -1){
                        $('#mySelfCardImg').attr('src',res.data.split(':')[0]);
                        if(!res.data.split(':')[1]){
                            $('#mySelfCardImg1').attr('src','img/morengong.png');
                        }else{
                            $('#mySelfCardImg1').attr('src',res.data.split(':')[1]);
                        }
                    }

                    if(model == 0 && (res.data == "null" || !res.data || res.data == 'undefined')){
                        $('#mySelfCardImg').attr('src','img/morengong.png');
                        $('#mySelfCardImg1').attr('src','img/morengong.png');
                    }else if(model == 0 && (res.data != "null" || res.data || res.data != 'undefined')){
                        $('#mySelfCardImg').attr('src',res.data);
                        $('#mySelfCardImg1').attr('src',res.data);
                    }
                }
            },
            error: function(msg){}
        });
    }

    function getReSetCard(username,model) {
        $.ajax({
            url:'reSetCard?name=' + username + '&model=' + model,
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){}
            },
            error: function(msg){}
        });
    }
</script>
</html>
